<template>
	<div class="canvasRender-stream">
		<span class="tips" v-if="!hasClosed">
			资源准备中
			<span>{{ tipPoint == 0 ? '.' : tipPoint == 1 ? '..' : tipPoint == 2 ? '...' : '' }}</span>
		</span>
		<div id="playerUI">
			<div id="player"></div>
		</div>
	</div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
import { getStreamPort, closeStreamPort } from '@/utils/api';

export default {
	name: 'CanvasRenderStream',
	data() {
		return {
			modelClass: ['Mesh'] /* 模型类 */,
			hasClosed: false /* 是否已经关闭流 */,
			tipPoint: 0 /* 加载点个数 */,
			timer: '' /* 计时器 */
		};
	},
	destroyed() {
		this.clearTime();
	},
	mounted() {
		this.init();
		this.$EventBus.$on('switchScene', () => {
			document.querySelector('#player').innerHTML = '';
			this.clearTime();
			this.init();
		});
	},
	methods: {
		...mapMutations('ue4Info', {
			setCurrentActor: 'setCurrentActor',
			addActiveGroup: 'addActiveGroup',
			addModelGroup: 'addModelGroup',
			clearAllGroup: 'clearAllGroup'
		}),

		// 初始化
		async init() {
			this.hasClosed = false;
			this.timer = setInterval(() => {
				if (this.tipPoint < 3) {
					this.tipPoint++;
				} else {
					this.tipPoint = 0;
				}
			}, 500);
			// await closeStreamPort();
			// const res = await getStreamPort(window.location.host.split(':')[0]);
			this.hasClosed = true;
			this.clearTime();
			// window.websocketIp = window.location.host.split(':')[0] + ':' + res.data[0];

			// 视频流初始化与ue4的回调函数监听
			$ue4.init((res) => {
				if (res.ActionName === 'EWI_GameStart') {
					$ue4.getEditActor();
				} else if (res.ActionName === 'EWI_PointChange') {
					this.currentPointChange(res);
				} else if (res.ActionName === 'EWI_GetAllLevelActor') {
					this.getEditPoint(res);
				} else if (res.ActionName === 'MouseSelectActor') {
					this.currentPointChange(res);
				} else if (res.ActionName === 'EWI_SelectActorFromName') {
					this.currentPointChange(res);
				} else if (res.ActionName === 'EWI_ActiveDaDianMode') {
					this.addGroup(res);
				} else if (res.ActionName === 'EWI_CopyActor') {
					this.addGroup(res);
				}
			});

			setTimeout(() => {
				$ue4.getEditActor();
			}, 500);
		},

		// 清除计时器
		clearTime() {
			clearTimeout(this.timer);
			this.timer = '';
		},

		// 当前选中点位改变
		currentPointChange(res) {
			if (this.modelClass.indexOf(res.Data.ClassName) > -1) {
				this.setCurrentActor({
					group: 'model',
					data: res
				});
			} else {
				this.setCurrentActor({
					group: 'active',
					data: res
				});
			}
		},

		// 获取当前可编辑点位信息
		getEditPoint(res) {
			if (res.Data) {
				this.clearAllGroup();
				res.Data.map((item) => {
					if (this.modelClass.indexOf(item.Data.ClassName) > -1) {
						this.addModelGroup({
							data: item,
							index: ''
						});
					} else {
						this.addActiveGroup({
							data: item,
							index: ''
						});
					}
				});
			}
		},

		// 新增一个点位或模型
		addGroup(res) {
			if (this.modelClass.indexOf(res.Data.ClassName) > -1) {
				this.addModelGroup({
					data: res,
					index: ''
				});
			} else {
				this.addActiveGroup({
					data: res,
					index: ''
				});
			}

			this.currentPointChange(res);
		}
	}
};
</script>

<style lang="scss">
.canvasRender-stream {
	height: 100%;
	width: 100%;
	position: relative;

	.tips {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 11;
		transform: translate(-50%, -50%);
		font-size: 24px;
		color: #efefef;

		span {
			display: inline-block;
			width: 20px;
		}
	}

	iframe {
		height: 100%;
		width: 100%;
	}
}
</style>
